<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/config.js"></script>
		<script src="js/jquery-1.7.1.min.js" ></script>
		<script src="js/jquery.blockUI-2.3.3.js"></script>

		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group {
				margin-top: 10px;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 30%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>员工号</label>
					<input id='account' type="number" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密&nbsp;&nbsp;&nbsp;码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button onclick="login()"  class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area"><a id='reg' href="setpassword.html">注册</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script>
		 mui.init();
		 
		 var storage = window.localStorage;  
		 $(document).ready(function(){ 
		 	 var getpassWord = storage["password"];  
			 var getusername= storage["username"];
		 
		      if(getusername == "" || getusername == null){
		      	return false ;
		      }
		 		var data = {
					"param": '{"account":"' + getusername+ '","password":"' + getusername + '"}'
				};
				//调用接口解析数据并遍历
				$.ajax({
					url: urlAdd + '/mobile/login',
					type: 'post',
					data: data,
					dataType: 'json',
					timeout: 10000,
					async: false,
					crossDomain: true,
									
						beforeSend: function() { //这里是开始执行方法，显示效果
								var Pwidth = document.body.clientWidth + "px";
								var Pheight = document.body.clientHeight + "px";
								$.blockUI({
									overlayCSS: {
										backgroundColor: 'gainsboro',
										opacity: '1',
										width: '' + Pwidth,
										heigh: '' + Pheight,
									},
									message: "<img src='images/wait.gif' style='vertical-align: text-top;vertical-align: middle;'><span style='vertical-align: middle;margin-left:10px;'>加载中...</span>",
									timeout:10000,
								css:{
									 position:'absolute',
										left:'30%',
										top:'35%',
										width:'50%',
										heigh:'10%',
										border:'0px',
										background:'none'
									}
								});
							},
							complete: function() { //方法执行完毕，效果自己可以关闭
								  $.unblockUI(); 
							},
							
					success: function(data) {
					   if(data == true){
						   	mui.toast('登录成功！');　
						   storage["password"]=password.value;
						   storage["username"]= account.value;
						   	window.location.href = "title.html";
					   
					   }else{
					   	mui.toast('用户名密码不正确！');
					   }
						
					},
					error: function(data) {
						mui.toast('系统繁忙，请稍后再试！');
					}
				});
		 });
			 
			 
			 
		 
		 function login(){
		 	
		 	var account = document.getElementById('account');
			var password = document.getElementById('password');
		 	
		 	if(account.value.trim().length <= 0 ){
		 		mui.toast('员工号不能为空，请重新输入！');　　　　
				return false;
		 	}else if(account.value.trim().length >= 7){
					mui.toast('员工号不能超过6位，请重新输入！');　　　　
					return false;
				}
		 	
		 	
			if(password.value.trim().length <= 0 ){
				mui.toast('密码不能为空，请重新输入！');　　　　
				return false;
			}else if(password.value.trim().length >= 10){
				mui.toast('密码不能超过15位，请重新输入！');　　　　
				return false;
			}
		 	
		 	
		 	var data = {
					"param": '{"account":"' + account.value + '","password":"' + password.value + '"}'
				};
				//调用接口解析数据并遍历
				$.ajax({
					url: urlAdd + '/mobile/login',
					type: 'post',
					data: data,
					dataType: 'json',
					timeout: 10000,
					async: false,
					crossDomain: true,
									
						beforeSend: function() { //这里是开始执行方法，显示效果
								var Pwidth = document.body.clientWidth + "px";
								var Pheight = document.body.clientHeight + "px";
								$.blockUI({
									overlayCSS: {
										backgroundColor: 'gainsboro',
										opacity: '1',
										width: '' + Pwidth,
										heigh: '' + Pheight,
									},
									message: "<img src='images/wait.gif' style='vertical-align: text-top;vertical-align: middle;'><span style='vertical-align: middle;margin-left:10px;'>加载中...</span>",
									timeout:10000,
								css:{
									 position:'absolute',
										left:'30%',
										top:'35%',
										width:'50%',
										heigh:'10%',
										border:'0px',
										background:'none'
									}
								});
							},
							complete: function() { //方法执行完毕，效果自己可以关闭
								  $.unblockUI(); 
							},
							
					success: function(data) {
					   if(data == true){
						   	mui.toast('登录成功！');　
						   storage["password"]=password.value;
						   storage["username"]= account.value;
						   	window.location.href = "title.html";
					   
					   }else{
					   	mui.toast('用户名密码不正确！');
					   }
						
					},
					error: function(data) {
						mui.toast('系统繁忙，请稍后再试！');
					}
				});
		 	
		 	
		 	
		 	
		 	
		 }
		 
		 
		 
		</script>
			
	</body>

</html>